<template>
    <div class="game-detail">
      <el-card>
        <img :src="game.imageUrl" class="game-image" />
        <h1>{{ game.name }}</h1>
        <p>类别: {{ game.category }}</p>
        <el-button type="primary" @click="goBack">返回</el-button>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { useRoute, useRouter } from 'vue-router';
  import { ref } from 'vue';
  
  const route = useRoute();
  const router = useRouter();
  
  // 模拟游戏数据
  const games = [
    { id: 1, name: '王者荣耀', category: 'MOBA', image: '../img/wzry.webp' },
    { id: 2, name: '绝地求生', category: '射击', image: '/img/pubg.jpg' },
  ];
  
  const game = ref(games.find(g => g.id == route.params.id));
  
  const goBack = () => router.push('/');
  </script>
  
  <style scoped>
  .game-detail {
    max-width: 600px;
    margin: auto;
    text-align: center;
  }
  .game-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
  }
  </style>
  